<template>
	<!-- 频道项组件 -->
	<Patch>
		<div class="inner" :style="checkedId==channel.id?actived:{}" @click="$emit('handleChannel', channel.id)">
			<span class="name">{{channel.name}}</span>
			<span class="num">{{channel.channel_count}}</span>
		</div>
	</Patch>
</template>

<script>

export default{
	props:{
		// 每项item的数据
		channel:{
			type: Object,
			required: true
		},
		// 选中样式
		actived:{
			type: Object,
			default: () => ({
				backgroundColor: '#e7e7e7'
			})
		},
		checkedId:{
			type: Number,
			default: 100
		}
	}
}
</script>

<style lang="less" scoped>
.inner{
	display: flex;
	align-items: center;
	padding: 0 20px;
	transition: background-color .3s;
	.name{
		font-size: 14px;
		color: #212121;
	}
	.num{
		padding-left: 6px;
		font-size: 12px;
		color: #999;
	}
}
</style>
